<template>
	<div class="searchweb">
		<ul class="topmuseci">
			<li>
				<div @click="return_" class="leftguod"><img src="../images/smallright.png" /></div>
				<input @keydown.enter="search(inputVal)" v-model="inputVal" type="text" name="" id="" value="" placeholder="    歌曲，歌手，专辑，歌词" />
			</li>
			<li><span>热门搜索</span></li>
		</ul>
		<ul class="singername">
			<li @click="out4(index)"  v-for="item,index in musicnames"><span v-html="item.title"></span></li>
			<li><span>薛之谦</span></li>
			<li><span>薛之谦</span></li>
			<li><span>薛之谦</span></li>
			<li><span>薛之谦</span></li>
		</ul>
	</div>
</template>

<script>
	import jsonp from "jsonp";
	export default{
		name:"",
		data(){
			return{
				inputVal:"",
				musicnames:[],
			}
		},
		components:{
			
		},
		computed:{
			
		},
		methods:{
			return_() {
				this.$router.push("/");
			},
			search(inputVal){

				jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.search.common&format=json&query="+inputVal+"&page_no=1&page_size=30",null,(err, res) => {
				if(err) {
					console.log(err)
				} else {
					console.log(2222,res)
					this.musicnames = res.song_list
					
				}
				})
			},
			out4(index){
				this.$router.push("/play");
				var songId = this.musicnames[index].song_id;
				var song = this.musicnames[index];
				jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=海阔天空  //海阔天空表示要搜索的内容" + songId,null,(err,res)=>{
					if(err){
						console.log(err)
					}else{
					
					}
				})
			},
		},
//		created(){
//			var nowTime = new Date().getTime(); //获取当前时间,注意返回值为毫秒
//			if(sessionStorage.searchweb) { //判断之前是否已经存储了searchweb信息
//				var tem = JSON.parse(sessionStorage.searchweb); //将存储的信息转化未json对象格式
//				if(nowTime - tem.expir < 3600000) { //判断存储信息的时间和当前时间的距离是否小于1小时
//					this.searchweb = tem.data;
//					console.log(1111, tem.data);
//					this.$store.commit("setSongList", tem.data.song_list);
//					return; //小于1h就直接return，不再执行ajaj请求
//				}
//			}
//			jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query="+a,null,(err, res) => {
//				if(err) {
////					console.log(err)
////					if(tem) {
////						this.searchweb = tem.data; //如果请求失败就用之前存储的值
////					}
//				} else {
//					console.log(res)
////							this.$store.commit("changeSong",res.bitrate.file_link);
////							this.$store.commit("changeSongname",res.songinfo.title);
////							this.$store.commit("changeSongautro",res.songinfo.author);
////							this.$store.commit("changeSongpic",res.songinfo.pic_small);
////							this.$store.commit("changeSongpicbig",res.songinfo.pic_small);
////							this.$store.commit("changeSongsj", res.songinfo.file_duration);
////							this.$store.commit("changeSongsearch",res.songinfo.title);
////					
////					
////					//					alert(111);
////					sessionStorage.searchweb = JSON.stringify({ //把json对象格式转化为字符串
////
////						"data": res,
////						"expir": new Date().getTime()
////					});
////					this.searchweb = res;
////					//					alert(111)
////					this.$store.commit("setSongList", res.song_list);
//				}
//			})
		
		mounted(){
			
		},
//		created(){
//          var nowTime = new Date().getTime();//获取当前时间,注意返回值为毫秒
//          if(sessionStorage.searchweb){//判断之前是否已经存储了searchweb信息
//              var tem = JSON.parse(sessionStorage.searchweb);//将存储的信息转化未json对象格式
//              if(nowTime - tem.expir<3600000){//判断存储信息的时间和当前时间的距离是否小于1小时
//                  this.searchweb = tem.data;
//                  console.log( this.searchweb);
//                  return;//小于1h就直接return，不再执行ajaj请求
//              }
//          }
//          jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=",+null,(err,res)=>{
//              if(err){
//                  console.log(err)
//                  if(tem){
//                      this.searchweb = tem.data;//如果请求失败就用之前存储的值
//                  }
//              }else{
//                  sessionStorage.searchweb = JSON.stringify({//把json对象格式转化为字符串
//                  	
//                      "data":res,
//                      "expir":new Date().getTime()
//                  });
//                  this.searchweb = res;
//              }
//          })
//      }
	}
</script>

<style scoped lang="scss">
	.searchweb {
		width: 100%;
		height: 100%;
		.topmuseci {
			width: 100%;
			height: 15%;
			  li {
				width: 100%;
				height: 50%;
				position: relative;
				border-bottom:1px solid #2d93af ;
				.leftguod {
					width: 11px;
					height: 15px;
					position: absolute;
					top: 33%;
					left: 5%;
					img {
						width: 100%;
					}
				}
				input[type="text"]{
					width: 60%;
					height: 45%;
					position: absolute;
					background: transparent;
					border: none;
				 	top: 33%;
				    right: 18%;
				    color: #94bfd2;
				}
				
			}
			li:nth-child(2){
				width: 100%;
				height: 50%;
				position: relative;
				span{
					font-size: 15px;
					color: #94bfd2;
					position: absolute;
					top: 30%;
					left: 20%;
				}
			}
		}
		.singername{
			width: 100%;
			height: 80%;
			overflow-x: hidden;
			li{
				width: 80%;
				height: 10%;
				margin-left: 20%;
				line-height: 48px;
				border-bottom:1px solid #2d93af ;
				span{
					color: #e2ebf0;
					font-size: 15px;
					overflow: hidden; 
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
</style>